<template>
  <div style="width:80%;height:100%;position: absolute">
    <div id="mapView"></div>
    <div id="info">
      <Row class="bench_search">
        <Col span="24">
          <span id="FID"></span>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="24">
          <span id="ORIG_FID"></span>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="24">
          <span id="BDCDYH"></span>
        </Col>
      </Row>
      <Row class="bench_search">
        <Col span="24">
          <span id="FWZL" style="width:100%"></span>
        </Col>
      </Row>
    </div>
    <Modal v-model="modal1" title="人员信息" width="1000">
      <template>
        <Table :columns="columns" :data="data">
<!--          <template slot-scope="{ row, index }" slot="action">-->
<!--            <Button type="primary" size="small" style="margin-right: 5px" @click="detailUserInfo(row)">详情</Button>-->
<!--          </template>-->
        </Table>
        <div style="text-align: right;margin-top: 10px">
          <Page :total="initInfo.total" :page-size="initInfo.pageSize" show-total  @on-change="pageChange"/>
        </div>
      </template>
    </Modal>
  </div>

</template>

<script>
import esriLoader from 'esri-loader'
import { getOfficeInfoByCompanyCode, findGridUserList, getGridInfo } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'user_name',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'cardno',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      initInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        user_name: ''
      },
      data: [],
      modal1: false,
      gridFid: '', // 社区FID
      communityName: '', // 社区名称
      searchInfo: {}, // 搜索项
      companyInfo: {}, // 登录用户信息
      pickID: '',
      pickGrade: '',
      pickInfo: {},
      pageChangeInfo: {}
    }
  },
  methods: {
    // 初始化
    init () {
      // this.window.visible = false
      this.companyInfo = this.$store.state.user.severUserInfo
      this.pickID = this.companyInfo.company_id
      this.pickGrade = this.companyInfo.company_grade
      let data = {
        grade: this.pickGrade,
        id: this.pickID
      }
      getGridInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.pickInfo = ret.data.data
          // this.disposeCoordinate()
          // this.getStatistics()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findGridUserList () {
      console.log(this.pickInfo, 'pickInfo')
      this.pageChangeInfo = this.initInfo
      this.pageChangeInfo.id = this.pickInfo.id
      this.pageChangeInfo.id = this.pickInfo.grade
      findGridUserList(this.pageChangeInfo).then(ret => {
        if (ret.data.errcode === 0) {
          this.initInfo.total = ret.data.data.totalRecord
          this.data = ret.data.data.results
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.msg
          })
        }
      })
    },
    pageChange (page) {
      this.pageChangeInfo.pageNo = page
      this.findGridUserList()
    },
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    _createSceneView: function () {
      let option = {
        // url: 'https://js.arcgis.com/4.16/',
        // css: 'https://js.arcgis.com/4.16/esri/themes/light/main.css'
        // url: 'http://10.40.20.35:38787/arcgis_js_api/library/4.13/dojo/dojo.js',
        // css: 'http://10.40.20.35:38787/arcgis_js_api/library/4.13/esri/themes/light/main.css'
        url: 'http://map.qstb.top/arcgis_js_api/library/4.16/dojo/dojo.js',
        css: 'http://map.qstb.top/arcgis_js_api/library/4.16/esri/themes/light/main.css'
      }
      esriLoader.loadModules(['esri/layers/MapImageLayer', 'esri/Map', 'esri/views/MapView', 'esri/Basemap', 'esri/PopupTemplate', 'esri/tasks/support/Query', 'esri/layers/FeatureLayer', 'esri/layers/GraphicsLayer', 'esri/symbols/SimpleMarkerSymbol', 'esri/renderers/SimpleRenderer', 'esri/symbols/SimpleLineSymbol', 'dojo/_base/Color', 'dojo/on',
        'dojo/dom', 'esri/layers/TileLayer', 'esri/widgets/Search', 'esri/geometry/Point', 'dojo/ready', 'dojo/dom-style', 'dojo/mouse', 'dojo/domReady!'], option).then(([MapImageLayer, Map, MapView, Basemap, PopupTemplate, Query, FeatureLayer, GraphicsLayer, SimpleMarkerSymbol, SimpleRenderer, SimpleLineSymbol, Color, on, dom, TileLayer, Search, Point, ready, domStyle, mouse]) => {
        let syBaseMap = new Basemap({
          baseLayers: [
            new TileLayer({
              // url: 'http://218.25.87.120:6080/arcgis/rest/services/SYENEWMAP/MapServer?d=1597398611975',
              url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/syemap/MapServer',
              title: 'Basemap'
            })
          ],
          title: 'basemap',
          id: 'basemap'
          // zoom: 40
        })
        let map = new Map({
          basemap: syBaseMap,
          center: [-46.807, 32.553]
        })
        let view = new MapView({
          container: 'mapView', // Reference to the DOM node that will contain the view
          map: map, // References the map object created in step 3
          resizeEnable: true,
          autoResize: true,
          center: [41514920.799, 4662871.182],
          zoom: 2,
          highlightOptions: {
            color: 'orange'
          }
        })
        let layer = new FeatureLayer({ // 网格名称
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/1',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // definitionExpression: 'FID in (308, 309, 310, 311, 312)',
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'Id',
          //           label: 'Id',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: '行政区名称',
          //           label: '行政区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '街道名称',
          //           label: '街道名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '社区名称',
          //           label: '社区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '网格编号',
          //           label: '网格编号',
          //           visible: true
          //         },
          //         {
          //           fieldName: '面积',
          //           label: '面积',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer, 2)
        let temp = {
          title: '详情',
          id: 'btn',
          image: '@/assets/images/nophtot1.jpeg'
        }
        let _this = this
        let layer1 = new FeatureLayer({ // 社区
          id: 'aaa',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/0',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/2',
          // definitionExpression: 'FID in (308, 309, 310)',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          popupTemplate: {
            title: '社区信息',
            content: [
              {
                type: 'fields',
                fieldInfos: [
                  {
                    fieldName: 'Id',
                    label: 'Id',
                    visible: true
                  },
                  {
                    fieldName: 'FID',
                    label: 'FID',
                    visible: true
                  },
                  {
                    fieldName: '行政区名称',
                    label: '行政区名称',
                    visible: true
                  },
                  {
                    fieldName: '街道名称',
                    label: '街道名称',
                    visible: true
                  },
                  {
                    fieldName: '社区名称',
                    label: '社区名称',
                    visible: true
                  },
                  {
                    fieldName: '网格编号',
                    label: '网格编号',
                    visible: true
                  },
                  {
                    fieldName: '面积',
                    label: '面积',
                    visible: true
                  }
                ]
              }
            ],
            actions: [temp]
          },
          outFields: ['*']
        })
        map.add(layer1, 3)
        let layer2 = new FeatureLayer({ // 街道
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/3',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '楼信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'Id',
          //           label: 'Id',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'Shape',
          //           label: 'Shape',
          //           visible: true
          //         },
          //         {
          //           fieldName: '街道名称',
          //           label: '街道名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '社区名称',
          //           label: '社区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '网格编号',
          //           label: '网格编号',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer2, 1)
        let layer3 = new FeatureLayer({ // 区
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/4',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '楼信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'Id',
          //           label: 'Id',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'Shape',
          //           label: 'Shape',
          //           visible: true
          //         },
          //         {
          //           fieldName: '街道名称',
          //           label: '街道名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '社区名称',
          //           label: '社区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '网格编号',
          //           label: '网格编号',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer3, 0)
        let layer4 = new FeatureLayer({ // 建筑点
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/0',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '楼信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'ORIG_FID',
          //           label: 'ORIG_FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FWZL',
          //           label: 'FWZL',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'BDCDYH',
          //           label: 'BDCDYH',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ],
          //   actions: [temp]
          // },
          outFields: ['*']
        })
        function measureThis () {
          _this.modal1 = true
          _this.findGridUserList()
        }
        view.popup.on('trigger-action', function (event) {
          if (event.action.id === 'btn') {
            measureThis()
          }
        })
        map.add(layer4, 5)
        let layer5 = new FeatureLayer({ // 建筑
          id: 'ccc',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/5',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '楼信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'ORIG_FID',
          //           label: 'ORIG_FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FWZL',
          //           label: 'FWZL',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'BDCDYH',
          //           label: 'BDCDYH',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer5, 4)
        // layer.load().then(function () { // 图层加载事件
        //   console.log('@@@@')
        //   // Set the view extent to the data extent
        //   // view.extent = layer.fullExtent
        //   // layer.popupTemplate = layer.createPopupTemplate()
        // })
        view.on('click', (evt) => { // 单击方法
          view.hitTest(evt).then(function (response) {
            if (response.results.length) {
              var graphic = response.results.filter(function (result) {
                return result.graphic.layer === layer
              })[0].graphic
              console.log('网格信息', graphic.attributes)
              // layer.popupTemplate = template
              var graphic1 = response.results.filter(function (result) {
                return result.graphic.layer === layer1
              })[0].graphic
              var graphic2 = response.results.filter(function (result) {
                return result.graphic.layer === layer2
              })[0].graphic
              var graphic5 = response.results.filter(function (result) { // 建筑点
                return result.graphic.layer === layer4
              })[0].graphic
              console.log('街道信息', graphic2.attributes)
              console.log('网格信息', graphic.attributes)
              console.log('社区信息', graphic1.attributes)
              console.log('建筑点信息', graphic5.attributes)
            }
          })
        })
        var searchWidget = new Search({
          view: view,
          includeDefaultSources: function (sourcesResponse) {
            return sourcesResponse.sources
          },
          allPlaceholder: '输入需要查询的街道/社区名称',
          searchAllEnabled: true, // 是否开启查找所有
          popupEnabled: true, // 是否弹出窗口
          resultGraphicEnabled: true,
          sources: [
            {
              layer: layer2,
              autoNavigate: true, // 是否自动导航到选定结果
              searchFields: ['街道名称'],
              displayField: '街道名称',
              exactMatch: false, // 表示是否进行完全匹配
              outFields: ['*'],
              name: '街道名称',
              placeholder: '风雨坛街道',
              maxSuggestions: 10, // 最大建议数量
              suggestionTemplate: '街道编号: {FID}, 街道名称: {街道名称}'
            },
            {
              layer: layer1,
              autoNavigate: true, // 是否自动导航到选定结果
              searchFields: ['社区名称'],
              displayField: '社区名称',
              exactMatch: false, // 表示是否进行完全匹配
              outFields: ['*'],
              name: '铝镁社区',
              placeholder: '铝镁社区',
              maxSuggestions: 10, // 最大建议数量
              suggestionTemplate: '社区编号: {FID}, 社区名称: {社区名称}'
            }]
        })
        // Adds the search widget below other elements in
        // the top left corner of the view
        view.ui.add(searchWidget, {
          position: 'top-right',
          index: 2
        })
        // Use the `search-start` event of the SearchViewModel
        searchWidget.viewModel.on('search-start', function (event) {
          console.log(event)
          console.log("SearchViewModel says: 'Search started'.")
        })
        // var highlight
        // view.whenLayerView(layer).then(function (layerView) { // 查询后设置高亮
        //   var query = layer.createQuery()
        //   query.where = 'FID = ' + this.gridFid + ''
        //   console.log(query.where, 'query.where')
        //   layer.queryFeatures(query).then(function (result) {
        //     if (highlight) {
        //       highlight.remove()
        //     }
        //     highlight = layerView.highlight(result.features)
        //   })
        // })
        view.when()
          .then(function () {
            return layer4.when()
          })
          .then(function (layer) {
            const renderer = layer.renderer.clone()
            renderer.symbol.width = 4
            renderer.symbol.color = [128, 128, 128, 0.8]
            layer.renderer = renderer
            return view.whenLayerView(layer)
          })
          .then(function (layerView) {
            view.on('pointer-move', eventHandler)
            view.on('pointer-down', eventHandler)
            function eventHandler (event) {
              view.hitTest(event).then(getGraphics)
            }
            var highlight
            let currentName = 1388
            function getGraphics (response) {
              if (response.results.length > 0) {
                const graphic = response.results.filter(function (result) {
                  return result.graphic.layer === layer4
                })[0].graphic
                const attributes = graphic.attributes
                const FID = attributes.FID
                // const BDCDYH = attributes.BDCDYH
                const FWZL = attributes.FWZL
                // const ORIG_FID = attributes.ORIG_FID
                if (highlight && (currentName !== FID)) {
                  highlight.remove()
                  highlight = null
                  return
                }
                if (highlight) {
                  return
                }
                document.getElementById('info').style.visibility = 'visible'
                document.getElementById('FID').innerHTML = FID
                // document.getElementById('ORIG_FID').innerHTML = ORIG_FID
                //   "Category " + category;
                // document.getElementById('BDCDYH').innerHTML = BDCDYH
                document.getElementById('FWZL').innerHTML = FWZL
                // highlight all features belonging to the same hurricane as the feature
                // returned from the hitTest
                const query = layer4.createQuery()
                query.where = 'FID = ' + FID + ''
                layer4.queryObjectIds(query).then(function (ids) {
                  if (highlight) {
                    highlight.remove()
                  }
                  highlight = layerView.highlight(ids)
                  // var popupTemplate = {
                  //   title: '11',
                  //   content: '111'
                  // }
                  // layer4.popupTemplate = popupTemplate
                  currentName = FID
                })
              } else {
                // remove the highlight if no features are
                // returned from the hitTest
                if (highlight) {
                  highlight.remove()
                  highlight = null
                }
                document.getElementById('info').style.visibility = 'hidden'
              }
            }
          })
      })
    },
    findGridInfo () {
      getOfficeInfoByCompanyCode().then(ret => {
        if (ret.data.errcode === 0) {
          this.gridFid = ret.data.data.csc_map_fid
          console.log(ret.data.data, '社区信息')
          this._createSceneView()
        }
      })
    }
  },
  mounted () {
    this.findGridInfo()
    this.init()
    // this._createSceneView()
  }
}
</script>

<style scoped>
  #mapView{
    position: absolute;
    width: 100%;
    height: 65%;
    /* width: 1024px;
    height: 768px; */
  }
  .search-div {
    width: 250px;
    margin-left: 55px;
    margin-top: 16px;
  }
  #info {
    margin-right: 10px;
    margin-top: 67px;
    width: 200px;
    height: 135px;
    background-color: black;
    opacity: 0.75;
    color: orange;
    font-size: 12pt;
    padding: 8px;
    visibility: hidden;
    float: right;
  }
</style>
